<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="lib/vue-2.4.0.js"></script>

</head>

<body>

     <div id="app">
          <!-- 父组件向子组件传递方式使用v-on，当我门自定义一个事件属性之后子组件就可以通过某种方式调用传递进去的方法 -->
          <comp @func="show"></comp>
     </div>
     <template id="tmp1">
         <div>
            <h1>这是子组件</h1>
            <input type="button" value="这是子组件中的按钮点击他触发父组件传递过来的方法" @click="myclick">
         </div>
     </template>

     <script>

         var com2 = {
             template:'#tmp1',
             methods: {
                myclick(){
                this.$emit('func',123)
                }
             },
         }
        var vm = new Vue({
             el : '#app',
             data : {
             msg :null
            },
            methods: {
                show(data){
                    console.log('调用了父组件上的show方法:---'+data);
                    this.msg = data
                    console.log(this.msg);
                    
                }
            },
            components:{
                'comp':com2
            }
        }) 

     </script>

</body>

</html>